<template>
  <div class="dialog" v-show="showMask">
    <div class="dialog-container">
      <div class="dialog-title">{{title}}</div>
      <div class="content" >

        <div class="elevator-number-content hide">
          <div class="elevator-number-text">电梯编号:</div>
          <input class="elevator-number-desc"  v-model="singleElevatorList.elevatorNumber"  ref="inputElevatorNumber" />
        </div>

        <div class="elevator-number-content">
          <div class="elevator-number-text">电梯类型:</div>
          <input class="elevator-number-desc"  v-model="singleElevatorList.elevatorType" ref="inputElevatorType"  />
        </div>

        <div class="elevator-number-content">
          <div class="elevator-number-text">电梯名称:</div>
          <input class="elevator-number-desc"  v-model="singleElevatorList.elevatorName" ref="inputElevatorName"  />
        </div>

        <div class="elevator-number-content">
          <div class="elevator-number-text">电梯SN号:</div>
          <input class="elevator-number-desc"  v-model="singleElevatorList.elevatorSn" ref="inputElevatorSn"  />
        </div>

        <div class="elevator-number-content hide">
          <div class="elevator-number-text">电梯注册码:</div>
          <input class="elevator-number-desc"  v-model="singleElevatorList.elevatorCode" ref="inputElevatorCode"  />
        </div>

        <div class="elevator-number-content hide" >
          <div class="elevator-number-text">电梯id:</div>
          <input class="elevator-number-desc"  v-model="singleElevatorList.elevatorId" ref="inputElevatorId"  />
        </div>

        <div class="elevator-number-content hide" >
          <div class="elevator-number-text">用户id:</div>
          <input class="elevator-number-desc"  v-model="singleElevatorList.operator_user_id" ref="inputOperatorUserId"  />
        </div>

      </div>
      <div class="btns">
        <div v-if="type != 'confirm'" class="default-btn" @click="closeBtn">
          {{cancelText}}
        </div>
        <div v-if="type == 'danger'" class="danger-btn" @click="clickDangerUpdate">
          {{dangerText}}
        </div>
        <div v-if="type == 'confirm'" class="confirm-btn" @click="confirmBtn">
          {{confirmText}}
        </div>
      </div>
      <div class="close-btn" @click="closeMask"><i class="iconfont icon-close">&#xe625;</i></div>
    </div>

  </div>
</template>
<script>
  export default {
    name: 'Update',
    props: {
      value: {},
      // 类型包括 defalut 默认， danger 危险， confirm 确认，
      type: {
        type: String,
        default: 'default'
      },
      singleElevatorList: {
        type:Object
      },
      content: {
        type: String,
        default: ''
      },
      title: {
        type: String,
        default: ''
      },
      cancelText: {
        type: String,
        default: 'cancel'
      },
      dangerText: {
        type: String,
        default: '删除'
      },
      confirmText: {
        type: String,
        default: '确认'
      },
    },
    data() {
      return {
        showMask: false,
        elevatorNumberUpdatedValue:"",  //电梯编号修改后的值;
        elevatorTypeUpdatedValue:"",  //电梯类型修改后的值;
        elevatorNameUpdatedValue:"",  //电梯名称修改后的值;
        elevatorSnUpdatedValue:"",  //电梯SN号修改后的值;
        elevatorCodeUpdatedValue:"",  //电梯注册码修改后的值;
        elevatorUpdatedList:{},
        showNoData:false,

      }
    },
    methods: {

      closeMask() {
        this.showMask = false;
      },
      closeBtn() {
        this.$emit('cancel');
        this.closeMask();

      },
      clickDangerUpdate() {
        this.$emit('danger');
        this.closeMask();
        this.elevatorNumberUpdatedValue = this.$refs.inputElevatorNumber.value
        this.elevatorTypeUpdatedValue =  this.$refs.inputElevatorType.value
        this.elevatorNameUpdatedValue = this.$refs.inputElevatorName.value
        this.elevatorSnUpdatedValue = this.$refs.inputElevatorSn.value
        this.elevatorCodeUpdatedValue = this.$refs.inputElevatorCode.value
        //console.log(this.elevatorNumberUpdatedValue, this.elevatorTypeUpdatedValue , this.elevatorNameUpdatedValue, this.elevatorSnUpdatedValue)

        this.elevatorUpdatedList.elevatorNumberUpdatedValue = this.elevatorNumberUpdatedValue;
        this.elevatorUpdatedList.elevatorTypeUpdatedValue = this.elevatorTypeUpdatedValue;
        this.elevatorUpdatedList.elevatorNameUpdatedValue = this.elevatorNameUpdatedValue;
        this.elevatorUpdatedList.elevatorSnUpdatedValue = this.elevatorSnUpdatedValue;
        this.elevatorUpdatedList.elevatorCodeUpdatedValue = this.elevatorCodeUpdatedValue;
        this.elevatorUpdatedList.elevatorId= this.$refs.inputElevatorId.value;
        this.elevatorUpdatedList.operator_user_id = this.$refs.inputOperatorUserId.value ;
        //console.log(this.elevatorUpdatedList)
        this.$emit('updateElevator', this.elevatorUpdatedList);
      },
      confirmBtn() {
        this.$emit('confirm');
        this.closeMask();
      }
    },
    mounted() {
      this.showMask = this.value;
    },
    watch: {
      value(newVal, oldVal) {
        this.showMask = newVal;
      },
      showMask(val) {
        this.$emit('input', val);
      }
    },
  }
</script>
<style lang="stylus" scoped="scoped">
  .hide{
    display: none;
  }
  .elevator-number-content{
    height: 0.6rem;
    width: 100%;
    margin-top: 0.2rem;
  }
  .elevator-number-text{
    height: 0.6rem;
    line-height: 0.6rem;
    float: left;
    width: 30%;
    text-align: center;
    background: rgb(230, 66, 64);
    color: white;
    border-radius: 0.1rem;
  }
  .elevator-number-desc{
    height: 0.6rem;
    line-height: 0.6rem;
    float: left;
    width: 64%;
    text-align: center;
    overflow: hidden;
    background: #ccc;
    margin-left: 2%;

  }
  .icon-close{
    font-size: 22px;
    color: white;
  }
  .dialog{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    .dialog-container{
      width: 80%;
      height: 210px;
      background: #ffffff;
      position: absolute;
      top: 30%;
      left: 9.5%;


      .dialog-title{
        width: 100%;
        height: 33px;
        line-height: 33px;
        font-size: 16px;
        letter-spacing: 2px;
        color: #696969;
        font-weight: 400;
        text-align: center;
        background: #4FC1E9;
        box-sizing: border-box;
        color: white;

      }
      .content{
        color: #797979;
        line-height: 26px;
        padding: 0 20px;
        box-sizing: border-box;
      }
      .inp{
        margin: 10px 0 0 20px;
        width: 200px;
        height: 40px;
        padding-left: 4px;
        border-radius: 4px;
        border: none;
        background: #efefef;
        outline: none;
        &:focus{
          border: 1px solid #509EE3;
        }
      }
      .btns{
        margin-top: 0.3rem;
        width: 100%;
        height: 35px;
        bottom: 0;
        left: 0;
        box-sizing: border-box;
        & > div{
          display: inline-block;
          height: 35px;
          line-height: 35px;
          padding: 0 14px;
          color: #ffffff;
          background: #f1f1f1;
          border-radius: 8px;
          margin-right: 12px;
          cursor: pointer;
        }
        .default-btn{
          color: #787878;
          height: 35px;
          line-height: 35px;
          float: left;
          margin-left: 17%;
          background: #4FC1E9;
          color:white;
          &:hover{
            color: #509EE3;
          }
        }
        .danger-btn{
          background: #EF8C8C;
          margin-left: 10%;
          &:hover{
            background: rgb(224, 135, 135);
          }
          &:active{
            background: #EF8C8C;
          }
        }
        .confirm-btn{
          color: #ffffff;
          background: #509EE3;
          &:hover{
            background: #6FB0EB;
          }
        }
      }
      .close-btn{
        position: absolute;
        top: 3px;
        right: 2px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 18px;
        cursor: pointer;
        &:hover{
          font-weight: 600;
        }
      }
    }
  }
</style>
